<template>
  <el-drawer
    :title="showTitle"
    :visible.sync="drawer"
    show-close
    size="50%"
    :before-close="dialogBeforeClose"
    :wrapper-closable="false"
  >
    <div class="container">
      <el-form ref="form" :model="formData" :rules="rules">
        <div class="" style="height: 100%">
          <div class="overflowX">
            <el-row :gutter="10" class="">
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="所属小区" prop="community_code">
                  <el-select
                    v-model="formData.community_code"
                    placeholder="请输入"
                    clearable
                    size="small"
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="车位名称" prop="name">
                  <el-input
                    v-model="formData.name"
                    size="small"
                    placeholder="请输入"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="备注" prop="remark">
                  <el-input
                    v-model="formData.remark"
                    type="textarea"
                    :rows="4"
                    size="small"
                    placeholder="请输入内容"
                  />
                </el-form-item>
              </el-col>

            </el-row>
          </div>
        </div>
        <el-row type="flex" justify="end" class="btn">
          <el-button size="small" @click="dialogBeforeClose">取消</el-button>
          <el-button
            type="primary"
            size="small"
            @click="addparkinglistFn"
          >确定</el-button>
        </el-row>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import { getCommunityApi, addparkinglistApi, getshowparkinglistApi, editparkinglistApi } from '@/api/parking/index'
export default {
  components: { },
  props: {
    drawer: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 抽屉
      // 下拉框数据
      options: [],
      formData: {
        community_code: '',
        name: '',
        remark: ''
      },
      rules: {
        community_code: [{ required: true, message: '请输入', trigger: 'blur' }],
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        remark: [{ required: true, message: '请输入', trigger: 'blur' }]
      }

    }
  },
  computed: {
    showTitle() {
      return this.formData.id ? '编辑车位' : '新增车位'
    }
  },
  created() {
    this.initData()
  },
  methods: {
    /**
     * 回显
     */
    async getshowparkinglist(id) {
      this.$emit('update:drawer', true)
      const { data } = await getshowparkinglistApi({ id })
      // console.log(data)
      this.formData = data[0]
    },
    /**
     * 新增/修改
     */
    addparkinglistFn() {
      this.$refs.form.validate(async flag => {
        if (!flag) return
        if (this.formData.id) {
          await editparkinglistApi(this.formData)
          this.$message.success('修改成功')
        } else {
          await addparkinglistApi(this.formData)
          this.$message.success('添加成功')
        }

        // 关闭弹框
        this.dialogBeforeClose()
        // 重新渲染
        this.$parent.getparkinglist()
      })
    },
    /**
     * 获取小区
     */
    async initData() {
      const res = await getCommunityApi()
      this.options = res.data
      // console.log(this.options)
    },
    dialogBeforeClose() {
      this.$emit('update:drawer', false)
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  align-items: center;
  h3 {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.88);
    padding-right: 10px;
  }
}
::v-deep.drawer {
  .el-drawer__header {
    padding-bottom: 10px;
    margin: 0;
    font-size: 25px;
    border-bottom: 1px solid #f0f0f0;
  }
  // .el-drawer__title {
  //   padding-top: 58px;
  // }
  .el-drawer__body {
    flex: 1 1;
    min-width: 0;
    min-height: 0;
    /* overflow: auto; */
  }
}
.container {
  padding: 0 20px;
  height: 100%;
  .el-form {
    position: relative;
    height: 100%;
    padding-bottom: 80px;
    .overflowX {
      height: 100%;
      overflow-x: hidden;
      // overflow: scroll;
    }
  }
}
.btn {
  border-top: 1px solid #f0f0f0;
  padding: 20px 10px;
}
.el-form-item {
  margin-bottom: 10px;
}
::v-deep .el-input {
  .el-input__inner {
    text-align: left;
  }
  .el-upload--picture-card {
    width: 100px;
  }
}
</style>
